<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="js/common.js"></script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="lastUpdateTime"></span>
            浏览 <span id="browseBtn"></span>
            回复 <span class="commentNum"> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a id="headImg">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>

                    <br>
                    <span render-key="author.id" render-fun="getAutorId" class="travelCount">0 </span>篇游记
                    <span id="fans">0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn" data-type="2" data-userId=""><span></span></i>
        </div>
        <div class="p-2  flex-fill"><a class="fa  fa-commenting-o commentCount" id="commentBtn"
                                       render-key="id" render-fun="getId"> </a>
        </div>
        <div class="p-2  flex-fill"><a class="fa fa-star-o" id="collectBtn" data-type="2"> </a>
        </div>
    </div>
</div>

<script>
    $(function () {
        var params = getParams();
        if (params.id) {
            $.get("/travels/" + params.id, function (data) {
                $("#headImg").attr("href", "/userProfiles.html?id=" + data.author.id);
                $(".travels").renderValues(data, {
                    getId: function (item, value) {
                        $(item).attr('href', "travelComment.html?id=" + value);
                    },
                    'getAutorId': function (item, value) {
                        $.get('/users/' + value + '/travels', function (data) {
                            $(".travelCount").html(data.total);
                        });
                        $("#likeBtn").attr("data-userId", value);
                        //粉丝数量回显
                        $.get("/users/" + value + "/fans", function (data) {
                            console.log(data.length);
                            $("#fans").html(data.length);

                        });
                    }
                });
            });

            //游记回复评论数回显
            $.get("/travels",{travelId:params.id}, function (data) {
                $(".commentNum").html(data.list[0].tarvelCommentNum);
            })
        }

        $.get('/comments/strategy', {type: 2, answer_id: params.id}, function (data) {
            $(".commentCount").html(data.total);
        });

        /*====================收藏======================*/

        var user = JSON.parse(sessionStorage.getItem("user"));
        var userId;
        if (!user) {
            userId = null;
        } else {
            userId = user.id;
        }
        var type = $("#collectBtn").data("type");

        //回显该文章的被收藏数量
        $.get("/collect/count", {contentId: params.id, type: type}, function (data) {
            $("#collectBtn").html(data.count);
        })

        //回显收藏
        $.get("/collect/select", {userId: userId, contentId: params.id, type: type}, function (data) {
            if (data.success) {
                console.log("收藏了,回显实心");
                $("#collectBtn").removeClass("fa-star-o").addClass("fa-star")
            } else {
                console.log("没收藏,回显空心");
                $("#collectBtn").removeClass("fa-star").addClass("fa-star-o")
            }
        })

        //收藏的星星按钮绑定点击事件(收藏/取消收藏)
        $("#collectBtn").click(function () {
            //获取当前文章的收藏数
            var count = $("#collectBtn").html();
            //验证是否登录了
            if (!user) {
                //没登录就弹提示框确认是否跳转登录
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: '请登陆后再执行相关操作!',
                    onClickConfirmBtn: function () {
                        window.location.href = "/login.html"
                    }
                });
            } else {
                //登录了就发送请求进行处理
                $.get("/collect", {userId: userId, contentId: params.id, type: type}, function (data) {
                    if (data.success) {
                        console.log("设置收藏");
                        //设置收藏,回显实心
                        $("#collectBtn").removeClass("fa-star-o").addClass("fa-star")
                        $("#collectBtn").html(count * 1 + 1);
                    } else {
                        console.log("取消收藏");
                        //取消收藏,回显空心
                        $("#collectBtn").removeClass("fa-star").addClass("fa-star-o")
                        $("#collectBtn").html(count - 1);
                    }
                })
            }
        })
        /*==============================点赞======================================*/
        type = $("#likeBtn").data("type");

        //回显该文章的被收藏数量
        $.get("/dogood/count", {contentId: params.id, type: type}, function (data) {
            $("#likeBtn span").html(data.count);
        })

        //回显点赞
        $.get("/dogood/select", {userId: userId, contentId: params.id, type: type}, function (data) {
            if (data.success) {
                console.log("点赞了,回显实心拇指");
                $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
            } else {
                console.log("没点赞,回显空心拇指");
                $("#likeBtn").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
            }
        })

        //点赞的拇指按钮绑定点击事件(点赞/取消点赞)
        $("#likeBtn").click(function () {
            //获取当前文章的收藏数
            var count = $("#likeBtn span").html();
            var authorId =$(this).data("userid");
            //验证是否登录了
            if (!user) {
                //没登录就弹提示框确认是否跳转登录
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: '请登陆后再执行相关操作!',
                    onClickConfirmBtn: function () {
                        window.location.href = "/login.html"
                    }
                });
            } else {
                //登录了就发送请求进行处理
                $.get("/dogood", {userId: userId, contentId: params.id, type: type}, function (data) {
                    if (data.success) {
                        console.log("设置点赞");
                        //设置点赞,回显实心拇指
                        $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                        $("#likeBtn span").html(count * 1 + 1);
                        //增加未读点赞信息
                        $.post("/mydogood", {authorId: authorId, userId: userId, contentId: params.id, type: type})
                    } else {
                        console.log("取消收藏");
                        //取消点赞,回显空心拇指
                        $("#likeBtn").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                        $("#likeBtn span").html(count - 1);
                        //删除未读信息
                        $.post("/mydogood", {authorId: authorId, userId: userId, contentId: params.id, type: type})
                    }
                })

            }
        })
        //浏览量查看(渲染中使用同步请求)
        var id = params.id;
        //console.log(id);
        $.ajax({
            url: "/newsPages/scanNumber",
            async: false,
            data:{id:id},
            success:function (data) {
                //console.log($(item).find("span"));
                $("#browseBtn").html(data);
            }
        })
        /**
         * 浏览量保存
         */
        $.post("/newsPages/number",{id:id},function (data) {
            //console.log(data);
        })


    });
</script>

</body>

</html>